import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
} from "snabbdom";

// 创建出patch函数
const patch = init([
    // Init patch function with chosen modules
    classModule, // makes it easy to toggle classes
    propsModule, // for setting properties on DOM elements
    styleModule, // handles styling on elements with support for animations
    eventListenersModule, // attaches event listeners
]);


// 创建虚拟节点（h函数是用来产生虚拟节点的）

const vnode1 = h('ul',{},[
    h('li',{key:1},'牛奶'),
    h('li',{key:2},'咖啡'),
    h('li',{key:3},'可乐')
])


const vnode2 = h('ul',{},[
    h('li',{key:1},'牛奶'),
    h('li',{key:4},'A'),
    h('li',{key:2},'咖啡'),
    h('li',{key:3},'可乐'),
    h('li',{key:5},'B'),
    h('li',{key:6},'C'),
])


const btn = document.getElementById('btn')

// 让虚拟节点上树
const container = document.getElementById("container");
patch(container,vnode1)

btn.onclick=function (){
    patch(vnode1,vnode2)
}
